<template>
	<view class="content">
		<view class="google">
			<view class="one" v-if="type == '1'">
				<image class="img" src="../../../static/s5.png" mode=""></image>
				<view class="title">开启谷歌验证</view>
				<view class="sm_title">
					谷歌验证方是由Google lnc.推出的第三方
					<br />
					独立安全可以为您的资金操作（如提币）提供
					<br />
					更进一步的的安全保护 当您开启谷歌验证之后 将优先使用谷歌验证代替短信验证
				</view>
				<view class="blue_btn" @click="type == '2'">立即开启</view>
			</view>
			<view class="two" v-if="type == '2'">
				<view class="block1">
					<view class="top">
						<view class="cir">1</view>
						<view class="title">
							在应用商店中搜索“GoogleAuthentication”
							<br />
							应用并下载
						</view>
					</view>
					<view class="down">下载</view>
				</view>
				<view class="block2">
					<view class="top">
						<view class="cir">1</view>
						<view class="title">
							安装完成后打开GoogleAuthentication，点
							<br />
							击右上角（安卓为右下角）的“+”，选择“手
							<br />
							动输入密钥”，页面中填
						</view>
					</view>
					<view class="btm">
						<input type="text" v-model="secretKey" disabled />
						<view class="copy" @click="copy(secretKey)">复制</view>
					</view>
				</view>
				<view class="block3">
					<view class="top">
						<view class="cir">1</view>
						<view class="title">
							添加成功后，您将得到一个有一定时效的6位数
							<br />
							字验证码，请将该验证码填入下方输入框中（需
							<br />
							要在验证码时效内）
						</view>
					</view>
					<view class="a_input">
						<text>短信验证码</text>
						<input class="uni-input" type="tel" value="" placeholder-class="uni-place" placeholder="短信验证码" />
						<view v-if="numTime == false" class="send" @click="getCode()"><button plain>发送验证码</button></view>
						<view v-else class="send">
							<button plain disabled>{{ numText }}</button>
						</view>
					</view>
					<view class="a_input">
						<text>谷歌验证</text>
						<input class="uni-input" type="tel" value="" placeholder-class="uni-place" placeholder="请输入谷歌验证码" />
					</view>
				</view>
				<view class="blue_btn">确认开启</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icon/uni-icon.vue';
import { REG_EMAIL, REG_PHONE } from '@/common/reg.js';
import HMmessages from '@/components/HM-messages/HM-messages.vue';
import comSvc from '@/common/comSvc.js';
import service from '../service.js';
import { mapGetters } from 'vuex';
export default {
	components: { uniIcons, HMmessages },
	data() {
		return {
			type: '2',
			numTime: false,
			numText: '60秒',
			num: 60,
			bindAccount: '',
			secretKey: '',
			
		};
	},
	computed: {
		...mapGetters(['GOOGLE', 'AVOID', 'USERINFO'])
	},
	onShow() {
		this.setGoogleCode();
	},
	methods: {
		//获取验证码倒计时
		times() {
			let that = this;
			clearInterval(this.timeInt);
			this.timeInt = setInterval(() => {
				that.num--;
				if (that.num == 0) {
					clearInterval(that.time);
					that.numTime = false;
					that.num = 60;
					that.numText = that.num + '秒';
				} else {
					that.numText = that.num + '秒';
					that.times();
				}
			}, 1000);
		},
		//获取验证码
		getCode() {
			let type = '';
			if (REG_EMAIL.test(this.USERINFO.account)) {
				type = 'EMAIL';
			} else {
				type = 'PHONE';
			}
			this.$api.showLoading();
			comSvc
				.getCode({
					sendType: type,
					sendAccount: this.USERINFO.account
				})
				.then(({ data }) => {
					this.$api.hideLoading();
					if (data.code == '100200') {
						this.numTime = true;
						this.times();
						uni.showToast({
						  icon: 'none',
						  title: '验证码已发送'
						})
					} else {
						uni.showToast({
							title: data.msg,
							icon: 'none'
						});
					}
				});
		},
		//复制
		copy(value) {
			let that = this;
			uni.setClipboardData({
				data: value,
				success: () => {
					uni.showToast({
					    title: '复制成功',
					    icon: 'none'
					});
				}
			});
		},
		//设置谷歌验证码
		setGoogleCode() {
			if (this.GOOGLE.isBound == false) {
				this.bindAccount = `www.nnex.io(${this.USERINFO.account})`;
				this.isSetGoogle = true;
				service.getGoogelCode().then(({ data }) => {
					if (data.code == '100200') {
						this.secretKey = data.data.secretcode;
					} else {
						uni.showToast({
						  icon: 'none',
						  title: data.msg
						})
					}
				});
			} else {
				this.setGoogle(true);
			}

			if (this.GOOGLE.isBound == true) {
				this.closeGoogle = true;
			}
		},
		//设置谷歌验证码开启还是关闭
		setGoogle(bool) {
			let name = 'setGoogleOn';
			if (!bool) {
				if (!this.phoneCode) {
					uni.showToast({
					  icon: 'none',
					  title: '请输入验证码'
					})
					return false;
				}
				if (!this.googleCode) {
					uni.showToast({
					  icon: 'none',
					  title: '请输入谷歌验证码'
					})
					return false;
				}
				name = 'setGoogleOff';
			}
			this.$api.showLoading();
			service[name](
				{},
				{
					'service-code': this.phoneCode,
					'google-code': this.googleCode
				}
			).then(({ data }) => {
				this.$api.showLoading();
				let that = this;
				if (data.code == '100200') {
					that.closeModal('closeGoogle');
					that.$store.dispatch('getGoogle');
					uni.showToast({
					  icon: 'none',
					  title: '更新成功'
					})
				} else {
					uni.showToast({
					  icon: 'none',
					  title: data.msg
					})
				}
			});
		},
		//第一次绑定谷歌验证码
		bindGoogle() {
			if (!this.loginPassword) {
				uni.showToast({
				  icon: 'none',
				  title: '请输入登录密码'
				})
				return false;
			}
			if (!this.googleCode) {
				uni.showToast({
				  icon: 'none',
				  title: '请输入谷歌验证码'
				})
				return false;
			}
			this.$api.showLoading();
			service
				.bingGoogle(
					{},
					{
						'login-password': this.loginPassword,
						'google-code': this.googleCode
					}
				)
				.then(({ data }) => {
					this.$api.hideLoading();
					let that = this;
					if (data.code == '100200') {
						that.closeModal('isSetGoogle');
						that.phone = '';
						that.phoneCode = '';
						that.$store.dispatch('getGoogle');
						uni.showToast({
						  icon: 'none',
						  title: '绑定成功'
						})
					} else {
						uni.showToast({
						  icon: 'none',
						  title: data.msg
						})
					}
				});
		}
	}
};
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>
